<template>
  <div class="container">
    <!-- 搜索头 -->
    <el-card>
      <el-form ref="form" :model="query" label-width="100px" :inline="true">
        <el-form-item label="登录人员：">
          <el-input
            style="width: 220px"
            v-model="query.userName"
            placeholder="请输入登录人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工状态：">
          <el-select
            style="width: 220px"
            v-model="query.status"
            placeholder="请选择员工状态"
          >
            <el-option
              v-for="item in dict.type.sys_normal_disable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="ml15">
          <el-button icon="el-icon-search" type="primary" @click="searchChange"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh-left" @click="searchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表体 -->
    <el-card style="margin: 6px 0 10px">
      <div style="margin-bottom: 18px">
        <el-button
          @click="dialogVisible = true"
          type="primary"
          plain
          icon="el-icon-plus"
          >添加用户</el-button
        >
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          @click="handleCancelAuthUser(selectionList)"
          :disabled="selectionList.length == 0"
          >批量取消授权</el-button
        >
      </div>
      <el-table
        :data="data"
        style="width: 100%"
        @selection-change="selectionChange"
        :header-cell-style="headStyle"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="用户名">
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="昵称">
        </el-table-column>
        <el-table-column align="center" prop="sex" label="性别">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_user_sex"
              :value="scope.row.sex"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phonenumber" label="手机号">
        </el-table-column>
        <el-table-column align="center" prop="dept.deptName" label="部门">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_normal_disable"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <template
              v-if="
                !(
                  scope.row.userName === 'admin' &&
                  $store.getters.name !== 'admin'
                )
              "
            >
              <el-button
                type="text"
                icon="el-icon-circle-close"
                size="small"
                @click="handleCancelAuthUser(scope.row.userId)"
                >取消授权</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 18px"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog
      title="添加授权用户"
      :visible="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      width="70%"
    >
      <ChoiceAuthUser
        ref="choiceAuthUserRef"
        v-if="dialogVisible"
        :queryRoleId="queryRoleId"
      ></ChoiceAuthUser>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave()" :loading="loading"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableWrapper from "@/components/Table/TableWrapper.vue";
import ChoiceAuthUser from "./ChoiceAuthUser.vue";
import {
  getBindRoleUserList,
  cancelAuthUser,
  addlAuthUser,
} from "@/api/system/role.js";

export default {
  components: { TableWrapper, ChoiceAuthUser },
  dicts: ["sys_user_sex", "sys_normal_disable"],
  props: {
    queryRoleId: {
      require: true,
      type: Number,
    },
  },
  data() {
    return {
      // 详情数据
      form: {},
      // 搜索数据
      query: {},
      // 分页数据
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      // 多选数据
      selectionList: [],
      // 表数据
      data: [],
      loading: false,
      dialogVisible: false,
    };
  },
  // 页面加载时触发
  created() {
    // 获取列表数据
    this.refreshChange();
  },
  methods: {
    // 搜索重置
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.refreshChange();
    },
    // 搜索点击
    searchChange() {
      this.page.currentPage = 1;
      this.refreshChange();
    },
    // 多选发生改变
    selectionChange(list) {
      this.selectionClear();
      list.map((v) => this.selectionList.push(v.userId));
    },
    selectionClear() {
      this.selectionList = [];
    },
    // 当前分页发生改变
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.refreshChange();
    },
    // 分页大小发生改变
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.refreshChange();
    },
    // 刷新数据
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 重载数据
    onLoad(page, params = {}) {
      let values = {
        ...params,
        // 排序字段
        orderByColumn: "create_time",
        // 排序方式 desc 降序 asc 升序
        isAsc: "desc",
      };

      this.loading = true;
      getBindRoleUserList(
        this.queryRoleId,
        page.currentPage,
        page.pageSize,
        Object.assign(values, this.query)
      ).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.selectionClear();
        this.loading = false;
      });
    },
    handleSave() {
      // 获取选择表中的数据
      this.loading = true;
      const userIds = this.$refs.choiceAuthUserRef.selectionList;

      addlAuthUser(this.queryRoleId, userIds).then(() => {
        this.loading = false;
        this.refreshChange();
        this.$modal.msgSuccess("授权成功!");
        this.dialogVisible = false;
      });
    },
    // 处理取消授权
    handleCancelAuthUser(userIds) {
      if (!Array.isArray(userIds)) {
        userIds = [userIds];
      }
      cancelAuthUser(this.queryRoleId, userIds).then(() => {
        this.refreshChange();
        this.$modal.msgSuccess("取消授权成功!");
      });
    },
    // 自定义表头颜色
    headStyle({ row, rowIndex }) {
      // console.log(row, rowIndex)// row选中行数据，rowindex添加属性的元素下标
      if (rowIndex === 0) {
        return {
          backgroundColor: "#F8FAFF",
          fontWeight: 800,
          color: "#515a6e",
        };
      }
    },
  },
};
</script>